<template>
  <el-container class="head-container">
    <el-header>
      <img src="../assets/ccnu.png" alt="" height="50px" />
      <div>
        <i class="el-icon-bell"></i>
        <i class="el-icon-s-custom"></i>
      </div>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container class="login-container">
      <el-aside>
        <div>
          <img src="..\assets\1.jpg" class="image" width="100%" height="100%" />
        </div>
      </el-aside>
      <el-main>
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="项目名称：">
            <el-input
              v-model="form.program"
              placeholder="请输入项目名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="团队名称：">
            <el-input
              v-model="form.program"
              placeholder="请输入团队名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目负责人：">
            <el-input
              v-model="form.program"
              placeholder="请输入项目负责人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人电话：">
            <el-input
              v-model="form.program"
              placeholder="请输入负责人电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目成员">
            <el-input
              v-model="form.program"
              placeholder="请输入成员姓名"
            ></el-input>
            <!-- <el-input
              placeholder="请输入成员电话"
              prefix-icon="el-icon-search"
            >
            </el-input> -->
            <!-- <div>
               <el-button type="primary">添加</el-button>
               <el-button type="primary">邀请</el-button>
            </div> -->
          </el-form-item>
          <el-form-item label="项目描述：">
            <el-input
              type="textarea"
              v-model="form.desc"
              :autosize="{ minRows: 4, maxRows: 4 }"
              placeholder="请输入项目具体描述，不超过两百字"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">完成创建</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      form: {
        program: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
<style lang="less" scoped>
.head-container {
  height: 100%;
}
.login-container {
  margin-left: 100px;
  margin-right: 100px;
  box-shadow: 0px -1px 0px 0px #e5e5e5, /*上边阴影 */ -0.2px 0px 0px 0px #e5e5e5,
    /*左边阴影  */ 0.2px 0px 0px 0px #e5e5e5,
    /*右边阴影 */ 0px 1px 0px 0px #e5e5e5; /*下边阴影 */
}
.el-header {
  /*设置显示为flex布局 */
  display: flex;
  /* 设置为flex左右布局 */
  justify-content: space-between;
  /* 左右内边距为0 */
  padding-left: 0;
  /* 元素上下居中 */
  align-items: center;
  margin-bottom: 10px;
  //下边阴影
  box-shadow: 0px 1px 0px 0px #e5e5e5;
  // 内嵌的div样式
  > div {
    display: flex;
    align-items: center;
    > i {
      margin-left: 10px;
    }
  }
}
.el-aside {
  width: 25vw;
  height: 85vh;
  overflow: hidden;
  /* height: 100px; */
}
.el-main {
  width: 600px;
  /* height: 100px; */
  transform: scale(1, 1);
}
.el-form{
  margin: 0 20% 0 20%;
}
</style>